<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <meta http-equiv="pragma" content="no-cache">  
	<meta http-equiv="cache-control" content="no-cache">  
	<meta http-equiv="expires" content="0"> 
    <title>权限管理</title>
    <script src="dist/js/jquery-1.9.1.min.js"></script> 
    <link rel="stylesheet" href="dist/css/normalize.css">
    <link rel="stylesheet" href="dist/css/bootstrap.css">
    <link rel="stylesheet" href="dist/css/index_public.css">
    <link rel="stylesheet" href="dist/css/index_table.css">
    <link rel="stylesheet" href="dist/css/jstree.min.css">
    <link rel="stylesheet" href="dist/css/chosen/chosen.css">
     <link rel="stylesheet" href="dist/css/ladda/ladda-themeless.min.css">
    <script src="dist/js/js/index_head_left.js"></script>
    <script src="dist/js/widgets/jstree.min.js"></script>
    <link rel="stylesheet" href="dist/css/toastr.min.css" >
	<script src="dist/js/widgets/toastr.min.js"></script>
	<script type="text/javascript" src="dist/js/widgets/jquery.nicescroll.min.js"></script>

    <!-- alert11.17 -->
    <link rel="stylesheet" href="dist/css/sweetalert.css">
    <script src="dist/js/widgets/sweetalert.min.js"></script>
    <script src="dist/js/widgets/chosen.jquery.js"></script>
    <style>
    	.option{line-height:0;width:97%;margin-left:1%;border:1px solid #ECEFF5;border-bottom:0;padding-top:5px;}
    	input{outline:none;}
    	.ladda-label{color:#fff;}
    </style>
	</head>
    <script>
	    
         $(document).ready(function(){
            $("#div1").load('include/left_title.html',function(){
                menu(); 
            })
            $("#loadHeader").load("include/header.html",function(){
                header();
            })
            getData();
            $('#add').on('hidden.bs.modal', function () {
            	$("#add .modal-body>div>input").val('');
            })
    	});
         
         function getData(){
        	 $.ajax({
     			type:"POST",
     			url:"actionServlet",
     			data:{"actionName":"permissionService","method":"getAllRole"},
     			dataType:"JSON",
     			success:function(data){
     				if(data.statusCode == 100){
		 				toastr.error('请联系管理员','未拥有权限');
		 				return;
		 			}
     				if(data.statusCode == 1){
     					var htmlStr = $("#demo_tr").html();
     					$("#role_table").empty();
     					$("#role_table").append("<tr id='demo_tr' style='display:none'>" + htmlStr+ "</tr>");
     					for(var i=0;i<data.result.length;i++){
     						var newStr = "<tr>" + htmlStr+"</tr>";
     						newStr = newStr.replace("#roleLevel#",data.result[i].level);
     						var re = new RegExp("#roleId#","g");
     						newStr = newStr.replace(re,data.result[i].id);
     						re = new RegExp("#roleName#","g");
     						newStr = newStr.replace(re,data.result[i].name);
     						$("#role_table").append(newStr);
     					}
     					
     				}
     			}
     		});
        	 
         }
         
         function saveRole(){
        	 var re = /^[1-9]\d*$/;
        	 var name = $("#role_name").val();
        	 var level = $("#role_level").val();
			 if(name==''){
				 toastr.warning('请输入权限名称','提示');
	 			 return;
			 }
			 if(level==''){
				 toastr.warning('请输入权限等级','提示');
	 			 return;	 
			 }
			 if(!re.test(level)){
				 toastr.warning('请输入正确的权限等级','提示');
	 			 return;
			 }
			 $('.btn-ladda').ladda( 'bind');
				Ladda.bind( '.progress-demo .ladda-button',{
				    callback: function( instance ){
				        var progress = 0;
				        var interval = setInterval( function(){
				            progress = Math.min( progress + Math.random() * 0.1, 1 );
				            instance.setProgress( progress );

				            if( progress === 1 ){
				                instance.stop();
				                clearInterval( interval );
				            }
				        }, 200 );
				    }
				});
				var l = $('.btn-ladda').ladda();
				l.ladda( 'start' );
        	 $.ajax({
      			type:"POST",
      			url:"actionServlet",
      			data:{"actionName":"permissionService","method":"saveRole","name":name,"level":level},
      			dataType:"JSON",
      			success:function(data){
      				if(data.statusCode == 100){
      					l.ladda( 'stop' );
		 				toastr.error('请联系管理员','未拥有权限');
		 				return;
		 			}
      				if(data.statusCode == 1){
      					getData();
      					l.ladda( 'stop' );
      					$("#btn_cancel").click();
      					swal({
      			            title: "",
      			            text: "新增成功!",
      			            type: "success"
      			        });
      				}
      			}
      		});
         }
         
         function menuManage(id,roleName){
        	 $('#menu_role_id').val(id);
        	 $('#js_tree_div').data('jstree', false).empty();
        	 $.ajax({
       			type:"POST",
       			url:"actionServlet",
       			data:{"actionName":"permissionService","method":"getMenuByRole","roleId":id},
       			dataType:"JSON",
       			success:function(data){
       				if(data.statusCode == 100){
		 				toastr.error('请联系管理员','未拥有权限');
		 				return;
		 			}
       				if(data.statusCode == 1){
       					$('#js_tree_div').jstree({
     		       			"plugins" : ["checkbox"],
     		       				'core' : {
     		       					'data' : data.result
     		       				}
     		       			});
       					$('#menu_role_name').val(roleName);
       					$('#role_menu_div').modal('show');
       				}
       			}
       		});
         }
         function funcManage(id,roleName){
        	 
        	$('#func_role_id').val(id);
        	$('#func_role_name').val(roleName);
        	$.ajax({
       			type:"POST",
       			url:"actionServlet",
       			data:{"actionName":"permissionService","method":"getFuncByRole","roleId":id},
       			dataType:"JSON",
       			success:function(data){
       				if(data.statusCode == 100){
		 				toastr.error('请联系管理员','未拥有权限');
		 				return;
		 			}
       				if(data.statusCode == 1){
       					var list = data.result;
       					
       					$(".chosen-select").empty();
       					
       					for(var i=0;i<list.length;i++){
       						var opStr = "<option value='"+list[i].id+"'";
           					if(list[i].checked=='1'){
           						opStr+=" selected='selected' "
           					}
           					opStr+="'>"+list[i].name+"</optin>";
           					$(".chosen-select").append(opStr);
       					}
       					
       					$("#role_func_div").modal('show');
       					$(".chosen-select").trigger("chosen:updated");
       					$(".chosen-select").chosen();
       				}
       			}
       		});
         	
         }
         
         function saveRoleMenu(){
        	 var id = $('#menu_role_id').val();
        	 var selectedId = $('#js_tree_div').jstree().get_checked(); 
        	 var menuIds = '';
     		for(var i=0;i<selectedId.length;i++){
     			var parent= $('#js_tree_div').jstree().get_parent(selectedId[i]);
     			menuIds+=selectedId[i]+",";
     			if(parent != '#'){
     				menuIds+=parent+",";
     			}
     		}
     		$.ajax({
       			type:"POST",
       			url:"actionServlet",
       			data:{"actionName":"permissionService","method":"updateMenuRole","roleId":id,"menuIds":menuIds},
       			dataType:"JSON",
       			success:function(data){
       				if(data.statusCode == 100){
		 				toastr.error('请联系管理员','未拥有权限');
		 				return;
		 			}
       				if(data.statusCode == 1){
       					$('#role_menu_div').modal('hide');
       					swal({
      			            title: "",
      			            text: "操作成功!",
      			            type: "success"
      			        });
       				}
       			}
     		});
         }
         
         function saveRoleFunc(){
        	 
        	 var id = $('#func_role_id').val();
        	 var funcIds = $('.chosen-select').val(); 
        	 if(funcIds != null && funcIds!=''){
        		 funcIds = funcIds.toString();
        	 }
        	 $.ajax({
        			type:"POST",
        			url:"actionServlet",
        			data:{"actionName":"permissionService","method":"updateFuncRole","roleId":id,"funcIds":funcIds},
        			dataType:"JSON",
        			success:function(data){
        				if(data.statusCode == 100){
    		 				toastr.error('请联系管理员','未拥有权限');
    		 				return;
    		 			}
        				if(data.statusCode == 1){
        					$('#role_func_div').modal('hide');
        					swal({
       			            title: "",
       			            text: "操作成功!",
       			            type: "success"
       			        });
        				}
        			}
      		});
        	 
         }
         
    </script>
<body>
 <div class="container-fluid">
     <!-- header  -->
    <div class="nav row " id="loadHeader">
    </div>
    <div class="row neirong" >
        <!-- 侧边导航 -->
         <div id="div1" class="sidebar col-xs-2">
            
        </div>
        <!-- 主题内容 -->
        <div class="main col-xs-10 row " style="min-height:800px">
                <h4 class="col-xs-12">权限管理</h4>
                <div class="col-xs-12 row option">
                        <a class="btn btn-primary" data-toggle="modal" data-target="#add" href="#add" style="margin-left:-8px;">
                            	新增权限
                        </a>
                </div>
               
             <table class="col-xs-12" id="clerka" style="width:97%;margin-left:1%;">
                <thead>
                    <tr>
                       <th>权限名称</th>
                       <th>权限级别</th>
                       <th>操作</th>
                    </tr>
                </thead>
                <tbody id="role_table">
                    <tr id="demo_tr" style="display:none">
                        <td>
                        	#roleName#
                        </td>
                        <td>
                        	#roleLevel#
                        </td>
                        <td>
                             <a class="deleteOdd btn btn-warning" onclick="menuManage('#roleId#','#roleName#')">菜单管理</a> 
                             <a class="detaileOdd  btn btn-info" onclick="funcManage('#roleId#','#roleName#')">方法管理</a> 
                        </td> 
                    </tr>
                </tbody>
            </table>                   
        </div>
        </div>
         <div class="row" id="divFooter"></div> 
        </div>
        
        
    <div class="modal inmodal in" id="add" tabindex="-1" role="dialog" aria-hidden="true" >
        <div class="modal-dialog">
        	<div class="modal-content animated bounceInRight">
                <div class="modal-body" style="text-align:center">
                	<h3>新增权限</h3>
                	<div style="margin-top:10px">
                		<label>权限名称:</label>
                		<input style="margin-left:10px" id="role_name" type="text" class="form-control">
                	</div>
                	<div style="margin-top:10px">
                		<label>权限等级:</label>
                		<input style="margin-left:10px" id="role_level" type="text" class="form-control">
                	</div>
                </div>
                <div class="modal-footer">
                    <button id="btn_cancel" type="button" class="btn btn-white" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary ladda-button btn-ladda" data-style="zoom-out" onclick="saveRole()">保存</button>
                </div>
            </div>
        </div>
    </div>
    
    
    
    
    <div class="modal inmodal in" id="role_menu_div" tabindex="-1" role="dialog" aria-hidden="true" >
        <div class="modal-dialog">
        	<div class="modal-content animated bounceInRight">
                <div class="modal-body" >
                	<h3 style="text-align:center">菜单权限</h3>
                	<div style="margin-top:10px">
                		<label>权限名称:</label>
                		<input disabled style="margin-left:10px" id="menu_role_name" type="text" class="form-control">
                		<input id="menu_role_id" type="hidden">
               		</div>
                	<div id="js_tree_div" style="margin:10px auto;width:200px">
                		
                	</div>
                </div>
                <div class="modal-footer">
                    <button id="btn_cancel" type="button" class="btn btn-white" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="saveRoleMenu()">保存</button>
                </div>
            </div>
        </div>
    </div>
    
     <div class="modal inmodal in" id="role_func_div" tabindex="-1" role="dialog" aria-hidden="true" >
        <div class="modal-dialog">
        	<div class="modal-content animated bounceInRight">
                <div class="modal-body" >
                	<h3 style="text-align:center">方法权限</h3>
                	<div style="margin-top:10px">
                		<label>权限名称:</label>
                		<input disabled style="margin-left:10px" id="func_role_name" type="text" class="form-control">
                		<input id="func_role_id" type="hidden">
               		</div>
                	<div id="func_select_div" style="margin:10px auto;width:100%">
<!--                 		<label style="margin-right:10px">方法名称:</label> -->
                		<select data-placeholder="请选择权限对应的方法" class="chosen-select" multiple style="width:100%;" tabindex="4">
						</select>
                	</div>
                </div>
                <div class="modal-footer">
                    <button id="btn_cancel" type="button" class="btn btn-white" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="saveRoleFunc()">保存</button>
                </div>
            </div>
        </div>
    </div>
<script src="dist/js/bootstrap.min.js"></script>
<script src="dist/js/ladda/spin.min.js"></script>
<script src="dist/js/ladda/ladda.min.js"></script>
<script src="dist/js/ladda/ladda.jquery.min.js"></script>
</body>
</html>